<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-27 17:45:14
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-27 21:32:44
 * @Description: demo08 red
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      /**
       * 我们将从一个名为 BoilingVerdict 的组件开始，它接受 celsius 温度作为一个 prop，并据此打印出该温度是否足以将水煮沸的结果。
       */
      class BoilingVerdict extends React.Component {
        render() {
          if (this.props.celsius >= 100) {
            return <p>水沸腾啦。</p>;
          }
          return <p>谁还没有沸腾。</p>;
        }
      }
      const scaleNames = {
        c: "摄氏度",
        f: "华氏度",
      };

      class TemperatureInput extends React.Component {
        constructor(props) {
          super(props);
        }

        handleChange(e) {
          this.props.onTemperatureChange(e.target.value);
        }

        render() {
          const temperature = this.props.temperature;
          const scale = this.props.scale;
          return (
            <fieldset>
              <legend>{scaleNames[scale]}:</legend>
              <input
                type="number"
                placeholder="请输入..."
                value={temperature}
                onChange={(e) => this.handleChange(e)}
              />
            </fieldset>
          );
        }
      }
      // func:转换为摄氏度
      function toCelsius(fahrenheit) {
        return ((fahrenheit - 32) * 5) / 9;
      }
      // func:转换为华氏度
      function toFahrenheit(celsius) {
        return (celsius * 9) / 5 + 32;
      }
      // func:转换函数
      function tryConvert(temperature, convert) {
        const input = parseFloat(temperature);
        if (Number.isNaN(input)) {
          return "";
        }
        const output = convert(input);
        const rounded = Math.round(output * 1000) / 1000;
        return rounded.toString();
      }
      class Calculator extends React.Component {
        constructor(props) {
          super(props);
          this.state = { temperature: 0, scale: "c" };
        }
        handleCelsiusChange(temperature) {
          this.setState({ scale: "c", temperature });
        }

        handleFahrenheitChange(temperature) {
          this.setState({ scale: "f", temperature });
        }
        render() {
          const scale = this.state.scale;
          const temperature = this.state.temperature;
          const celsius =
            scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
          const fahrenheit =
            scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;
          return (
            <div>
              <TemperatureInput
                scale="c"
                temperature={celsius}
                onTemperatureChange={(t) => this.handleCelsiusChange(t)}
              />
              <TemperatureInput
                scale="f"
                temperature={fahrenheit}
                onTemperatureChange={(t) => this.handleFahrenheitChange(t)}
              />
              <BoilingVerdict celsius={parseFloat(celsius)} />
            </div>
          );
        }
      }
      ReactDOM.render(
        <div>
          <Calculator />
        </div>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>
